<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #000;
				position: relative;
			}

			#photos div {
				width: 800px;
				height: 600px;
				border-radius: 50%;
				position: absolute;
				bottom: 10%;
				left: 50%;
				margin-left: -200px;
				margin-top: -400px;
				transform: rotateX(90deg);
				background: -webkit-radial-gradient(center center, 600px 600px, rgba(158, 158, 222, 0.5), rgba(0, 0, 0, 0));
			}

			.vv {
				color: #fff;
				line-height: 30px;
				position: absolute;
			left: 40%;
            margin-top: 303px;
			}

			.aaa {
				perspective: 800px;
				/*设置景深为800px*/
			}

			#photos {
				width: 150px;
				/*宽度*/
				height: 200px;
				/*高度*/

				/*加一个灰色边框*/
				margin: 110px auto;
				/*水平居中，高度距离顶部100px*/
				transform-style: preserve-3d;
				/*设置3d环境*/

				transform: rotateX(-10deg);

			}

			#photos img {
				width: 100%;
				height: 100%;
				position: absolute;
				box-shadow: 0 0 8px #eaeaea;
				box-shadow: 1px -1px 6px #666;
				border-radius: 4px;
				-webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5));
				cursor: pointer;

			}
		</style>
	</head>
	<body>
		
		<div class="aaa">
			
			<div id="photos">
				<img src="img/1.jpg">
				<img src="img/2.jpg">
				<img src="img/3.jpg">
				<img src="img/4.jpg">
				<img src="img/5.jpg">
				<img src="img/6.jpg">
				<img src="img/7.jpg">
				<img src="img/8.jpg">
				<div>

				</div>
			</div>
			<audio src="img/小匆匆%20-%20世界这么大还是遇见你%20(女声版).mp3" autoplay="autoplay">

			</audio>
		</div>
<div class="vv" id="text">
		
		</div>
		<script type="text/javascript">
			var x = 0;
			var times = 0
			var photosDom = document.getElementById('photos');
			//获取图片数组
			var images = photosDom.getElementsByTagName('img');
			var len = images.length
			var deg = Math.floor(360 / len);

			function trans() {
				for (var i = 0; i < len; i++) {
					images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
				}

				for (var g = 0; g < len; g++) {
					
					images[g].onmouseover = (() => {
						clearTimeout(times)
					})
						images[g].onmouseleave=function(){
								times = setInterval(zhuan, 50);
							this.style.width=100+"%"
							this.style.height=100+"%"
						}
		
						images[g].onclick=function(){
							this.style.width=400+"px"
							this.style.height=300+"px"
						}
				}

			}

			function zhuan() {
				photosDom.style.transform = "rotateX(-10deg) rotateY(" + (x++) * 0.2 + "deg)";
			}
			times = setInterval(zhuan, 50);


			trans()

			let divTyping = document.getElementById('text')
			let v = 0,
				timer = 0,
				str = '我的宝贝 世界那么大 还是遇见你,你的笑你的天真 让我魂牵梦萦<br> 想带你看很多的风景 ,走完一个又一个的四季 <br> 紧握的一双手<br>无论走到哪都不会分离<br>你不在我身边的<br>一分一秒我都忍不住的想你<br>'

			function typing() {
				if (v <= str.length) {
					divTyping.innerHTML = str.slice(0, v++) + '_'
					timer = setTimeout(typing, 200)
				} else {
					divTyping.innerHTML = str //结束打字,移除 _ 光标
					clearTimeout(timer)
				}
			}

			typing()
		</script>
	</body>
</html>
